<template>
    <nav>
        <ul>
            <li>
                <router-link to="/film/nowplaying" active-class="active">
                    <span>正在热映</span>
                </router-link>
            </li>
            <li>
                <router-link to="/film/comingsoon" active-class="active">
                    <span>即将上映</span>
                </router-link>
            </li>
        </ul>
    </nav>
</template>
<script setup lang="ts">

</script>
<style scoped lang="scss">
nav {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #eaeaea;
    background-color: #fff;

    ul {
        display: flex;
        text-align: center;

        li {
            flex: 1;
            display: flex;
            justify-content: center;

            a.active {
                width: 40%;
                border-bottom: 2px solid red;
                display: block;
                color: #fe5100;
            }
        }
    }
}
</style>